<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
    />
    <r-table
      :isSelection="false"
      :isHandle="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      @refresh="page()"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {
        couponType: "",
        status: "",
        phone: ""
      },
      searchForm: [
        {
          type: "select",
          placeholder: "CouponType",
          prop: "couponType",
          width: 230,
          options: [
            { label: "Recharge Coupon", value: 0 },
            { label: "Staging Coupon", value: 1 },
            { label: "Voucher", value: 2 },
            { label: "Trial Coupon", value: 3 },
            { label: "Package Deduction Coupon", value: 4 }
          ]
        },
        {
          type: "select",
          placeholder: "Employ Status",
          prop: "status",
          width: 240,
          options: [
            { label: "No Employ", value: 0 },
            { label: "Already Employ", value: 1 },
            { label: "Have Expired", value: 2 },
            { label: "Delisted", value: 3 }
          ]
        },
        { type: "input", prop: "phone", placeholder: "Phone", width: 180 }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "primary",
          plain: true,
          handle: async e => {
            this.zeroFn();
            let page = {
              pageNum: this.pagination.offset,
              pageSize: this.pagination.limit,
              couponType: this.searchData.couponType,
              status: this.searchData.status,
              phone: this.searchData.phone
            };
            let res = await this.apis.couponUseCouponList(page);
            this.tableData = res.rows || [];
            this.pagination.total = res.total;
            this.searchData.couponType = "";
            this.searchData.status = "";
            this.searchData.phone = "";
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              couponType: "",
              status: "",
              phone: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "Activity Name", prop: "activityName" },
        { label: "Activity Rules", prop: "ruleName" },
        { label: "CouponName", prop: "couponName" },
        { label: "Agent", prop: "agentName" },
        { label: "User", prop: "niceName" },
        { label: "Phone", prop: "phone" },
        { label: "Brief Introduction", prop: "couponDesc" },
        {
          label: "Coupon Money",
          prop: "discount",
          width: 70,
          formatter: e => "$" + e.discount
        },
        {
          label: "Employ Limitation",
          prop: "useCondition",
          formatter: e =>
            e.useCondition == 0 ? "Unlimited" : "$" + e.useCondition
        },
        {
          label: "Type",
          prop: "couponType",
          formatter: e =>
            e.couponType == 0
              ? "Recharge Coupon"
              : e.couponType == 1
              ? e.holdDays
                ? "Staging Coupon：" + e.holdDays + "/day"
                : "Staging Coupon"
              : e.couponType == 2
              ? "Voucher"
              : e.couponType == 3
              ? e.tryDays
                ? "Trial Coupon：" + e.tryDays + "/day"
                : "Trial Coupon"
              : e.couponType == 4
              ? "Package Deduction Coupon"
              : "--"
        },
        {
          label: "EmployStatus",
          prop: "status",
          formatter: e =>
            e.status == 0
              ? "No Employ"
              : e.status == 1
              ? "Already Employ"
              : e.status == 2
              ? "Have Expired"
              : e.status == 3
              ? "Delisted"
              : "--"
        },
        // { label: "Employ时间", prop: "usedTime" },
        { label: "Period Of ValidityStart Time", prop: "startTime" },
        { label: "Period Of Validity Deadline", prop: "endTime" }
      ],
      pagination: { limit: 10, offset: 1, total: 0 }
    };
  },
  async mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let res = await this.apis.couponUseCouponList({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.agentIdClass {
  margin-bottom: 20px;
}

.agentIdClass > .el-select {
  margin-left: 8%;
}

.agentIdClass1 > .el-select {
  margin-left: 11%;
}
</style>
